<template>
	<view>
		<uni-nav-bar dark :fixed="true" shadow background-color="#007AFF" status-bar left-icon="left" left-text="返回"
			title="商品图片" @clickLeft="back" />
			<uni-forms :modelValue="baseFormData" ref="form">
				
				<uni-forms-item  style="width: 70%; position: relative; left: 5%; top:30rpx" label="条码:"  name="barcode">
						<uni-easyinput  style="margin-left: -35rpx;" v-model="baseFormData.barcode" placeholder="请输入商品条码" />
				</uni-forms-item>
				<uni-forms-item  style="width: 70%; position: relative; left: 5%; top:30rpx" label="货号:"  name="productCode">
						<uni-easyinput  style="margin-left: -35rpx;" v-model="baseFormData.productCode" placeholder="请输入商品货号" />
				</uni-forms-item>
				<button  style="background-color:rgb(0,122,255);  width: 170rpx; height: 60rpx; right: 22%; top: 20rpx;"  @click="submit('center',)" ><text style="font-size: 15px; position: relative; top: -8px;""> 查找</text></button>
				<button  style="background-color:rgb(230,67,64);  width: 170rpx; height: 60rpx; left: 10%; position: relative; top: -20px;"  @click="clean()"><text style="font-size: 15px; position: relative; top: -8px;""> 清空</text></button>

			</uni-forms>
			
			<uni-table ref="table" border stripe style="position: relative; top: 25px;">
				<uni-tr>
					<uni-th width="50" align="center">图片</uni-th>
					<uni-th width="120" align="center">品牌</uni-th>
					<uni-th width="130" align="center">类别</uni-th>
					<uni-th width="110" align="center">货号</uni-th>
					<uni-th width="80" align="center">颜色</uni-th>
					<uni-th width="90" align="center">条码</uni-th>
				</uni-tr>
				<uni-tr  v-for="(item, index) in tableData" :key="index">
					<uni-td><image @click="details('center',item.imgPath,item.barCode)"  :src=item.imgPath style="width: 50px;height: 50px;"></image></uni-td>
					<uni-td>{{item.brand}}</uni-td>
					<uni-td>{{item.category}}</uni-td>
					<uni-td>{{item.productCode}}</uni-td>
					<uni-td>{{item.color}}</uni-td>
					<uni-td>{{item.barCode}}</uni-td>
				</uni-tr>

			</uni-table>
			
			<div>
				<!-- <text style="font-weight: 550; position: relative; left: 6%;top: -350rpx;"> 图片详情:</text> -->
				<!-- <image :src="imgFilePath" style="top: 10%;left: 5%;"></image> -->
				<uni-popup ref="popup" background-color="#fff"  @touchmove.prevent :round="30" mode="bottom" >
					<scroll-view :scroll-top="scrollTop" scroll-y="true"  @touchmove.stop @scroll="scroll">
					  <view class="popup-content" >
						  <text style="font-weight: 550; position: relative; left: 6%;">商品条码:{{this.barCode}}</text>
					  	 <image :src="imgFilePath" style="top: 5%;left: 5%;"></image>
						 <!-- <image  style="top: 5%;left: 5%;" src="http://www.qxbaby.cc:81/barcodePic/105005078037.jpg"></image> -->
					  </view>
					</scroll-view>f
				</uni-popup>
				
			</div>
			
	</view>
</template>

<script>
	import {baseUrl,imgPath} from 'libs/util/global'
	export default {
		data() {
			return {
				tableData: [],
				baseFormData:{
					barcode:undefined,
					productCode: undefined
				},
				//滚动条
				scrollTop: 0,
				old: {
				    scrollTop: 0
				   }, 
				imgFilePath: undefined,
				barCode: undefined
			}
		},
		
		
		
		methods: {
			
			selectInfo(){
				uni.showLoading({
				title: '加载中.....'
				})
				uni.request({
					url: baseUrl+'/Img/info',
					header: {
						'content-type': 'application/json'
					},
					method: 'POST',
					data: {
						barCode: this.baseFormData.barcode,
						productCode: this.baseFormData.productCode
					},
					success: (res) => {
						setTimeout(function() {
							uni.hideLoading();
						}, 100);
						console.log(res)
						if(res.data.data.length != 0){
							for (var i = 0; i < res.data.data.length; i++) {
								console.log(res.data.data[i])
								if(res.data.data[i].imgPath == null){
									res.data.data[i].imgPath = '../../static/absent.jpg'
								}
							}
							this.tableData = res.data.data
						}else{
							uni.showToast({
								title: '无法找到产品信息',
								icon: 'none',
								duration: 1000
							});
						}
						
					}
				})
			},
			// 左上角返回按钮
			back() {
				uni.switchTab({
					url: '/pages/work/work'
				})
			},
			details(type,imgPath,barCode){
				this.$refs.popup.open(type)
				this.imgFilePath = imgPath
				this.barCode = barCode
				console.log(imgPath)
			},
			// 清空表单信息
			clean(){
				this.baseFormData.barcode = undefined
				this.baseFormData.productCode = undefined
			},
			// 查找图片
			submit(type){
				
				// 判断条码合法性
				let barcode = this.baseFormData.barcode
				console.log(barcode)
				if(barcode == '' || barcode == null){
					if(this.baseFormData.productCode.length>=3){
						this.selectInfo()
					}else{
						uni.showToast({
							title: '货号不能低于3个字符!',	
							icon: 'none',
							duration: 1000
						});
					}
				}else{
					console.log("测试进入")
					if(barcode.match('^[0-9]{12}$') ){
						if(this.baseFormData.productCode == null || this.baseFormData.productCode == ''){
							this.selectInfo()
						}else{  // 货号不为空的情况
							if(this.baseFormData.productCode.length>=3){
								this.selectInfo()
							}else{
								uni.showToast({
									title: '货号不能低于3个字符!',
									icon: 'none',
									duration: 1000
								});
							}
						}
					}else{
						uni.showToast({
							title: '请输入正确的商品条码!',
							icon: 'none',
							duration: 1000
						});
					}
				}
			}
			
		}
	}
</script>

<style>
.popup-content {
			align-items: center;
			justify-content: center;
			padding: 15px;
			height: 500rpx;
			width: 650rpx;
			border-radius: 10%;
			background-color: #fff;
		}
</style>
